Publicar una página web en github
Más información en https://docs.github.com/es/pages/getting-started-with-github-pages/creating-a-github-pages-site
Crear una cuenta en github
Ir a https://github.com/signup y llenar el formulario para crear una cuenta.
Es necesario registrarse con un corre electronico.
Crear un nuevo repositorio
En la página principal,
autenticadas con su cuenta,
busquen el ícono + en el costado superior derecho.
Señalado con el recuadro rojo en la siguiente captura
En el menú desplegado, seleccionar New repository
En el formulario para crear el repositorio
escribimos el nombre, en mi caso tm1
Dejamos el resto de campos por defecto y presionamos Create repository
Subir index.html al repositorio
En el repositorio creado presionamos el enlace uploading an existing file
en la sección inferior de Quick setup
Agregamos al repositorio el archivo index.html
que encuentran en el siguiente enlace
se abrirá la siguiente página, para guardarla en un archivo
usen la combinación de teclas Ctrl + s
y guarden el archivo index.html
o click derecho y Save as... o Guardar como...
En el panel de github arrastran el index.html que descargaron
o seleccionan choose your files y seleccionan el archivo mencionado.
- Deben ver el archivo
index.htmlen la parte media de la interfaz. - Escriban un comentario al cambio que describa lo que estan haciendo.
- Pulsen el botón
Commit changes.
Deben tener algo similar a la siguiente captura
Ahora vamos a crear la carpeta images y styles.
Crear archivos y directorios desde la interfaz web
En la interfaz del repositorio ubicamos y pulsamos en el botón
Add file, en el menú desplegado pulsamos Create new file
Para poder crear un directorio o folder debemos crear un archivo interno.
- En la parte superior izquierda, en el campo de escritura escribimos
images/emptylo que al final de escribir se vera como en la imagen. - Pulsamos el botón
Commit changes....
En la ventana desplegada escribimos un mensaje que describa el cambio y pulsamos Commit changes.
Obtenemos la carpeta images con el archivo vacio empty,
en esa carpeta subiremos la siguiente imagen.
Pulsamos el botón Add file en el costado derecho de la interfaz,
y realizamos el mismo proceso que hicimos al subir index.html.
Ahora vamos a crear el archivo styles/style.css.
Nos ubicamos en la carpeta raíz del repositorio pulsando el enlace del nombre de nuestro repositorio en el costado izquierdo superior.
Pulsamos de nuevo Create new file
En el campo del costado superior izquierdo escribimos styles/style.css
y obtendremos la siguiente pantalla.
Del siguiente enlace, copiamos y pegamos el texto en nuestro repositorio.
Como se ve en la siguiente imagen
y pulsamos el botón Commit changes..., agregamos un comentario
y pulsamos Commit changes.
Crear la página pública
En el menú principal del repositorio,
ubicamos el menú settings e ingresamos pulsando el botón.
En el costado izquierdo de la pantalla ubicamos y pulsamos en
Pages.
En el centro de la pantalla, en la sección Branch o Rama
debemos cambiar None por main y pulsamos el botón save.
Volvemos al menú principal pulsando el botón superior izquierdo con el nombre de nuestro repositorio
Veremos un nuevo menú en el costado derecho inferior
Deployments, pulsamos el enlace en ese apartado.
En la página de Deployments obtenemos en enlace de nuestra página web pública.
Al pulsar ese enlace tendremos la página pública
Modificar los contenidos
Volvemos a la página principal del repositorio
y seleccionamos el archivo index.html
Ubicamos y pulsamos el ícono de lapiz en el costado derecho
Edit this file
Modificamos los textos del archivo, por ejemplo,
el texto del titulo ubicado en la etiqueta <h1>
en la linea 12 del archivo.
Tambien cambiamos la imagen,
copiamos y pegamos un enlace de una imagen de internet
en el atributo src="aqui el enlace"
ejemplo:
- cambian en la linea 13
images/gato-glitch.png - por
https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Restaurant_Amigos_de_Acapulco_%28window%29%2C_Chico.jpg/1920px-Restaurant_Amigos_de_Acapulco_%28window%29%2C_Chico.jpg
Luego se hace el commit como lo hemos visto en instrucciones pasadas
pulsando Commit changes... escribimos un mensaje que describa el cambio
y luego Commit cahnges.
Obtenemos en el enlace de la página pública lo siguiente
Instrucción para el entregable
Hagan varios cambios, exploren modificando el archivo style.css
en la carpeta de styles.
Copien, peguen, reescriban secciones de index.html.
El entregable debe ser el enlace de la página pública del repositorio.
Por ejemplo: https://ruidajo.github.io/tm1/
El repositorio debe tener por lo menos 10 commits que muestran los cambios que fueron creando.
